<template>
  <div>
    <div class="app-men">
      <div class="app-men-box">
        <div class="men-box">
          <div class="men-boxs" v-if="patrolData === null" @click="jumpMap">
            <div class="men-title"> 巡查对象</div>
            <div class="men-title flxend" style="color: gray">
              <div>请选择</div>
              <img src="../../../assets/images/appa_r.png" alt="" class="imgs">
            </div>
          </div>
          <div class="list-box" style="width: 100%" v-else @click="jumpMap">
            <div class="dian" v-if="patrolData.s_type_mc">{{ patrolData.s_type_mc !== '' ? patrolData.s_type_mc : '无对象' }}-</div>
            <div class="dian" v-else>
              <span v-if="patrolData.b_type === 'qy'">企业-</span>
              <span v-if="patrolData.b_type === 'zjgd'">在建工地-</span>
              <span v-if="patrolData.b_type === 'qt'">其他-</span>
            </div>
            <div class="yhd">
              <div  @change="jumpDetail">
                <div v-if="patrolData !== null">
                  <span v-if="patrolData.id !== '' && patrolData.id !== null">
                    {{ patrolData.mc !== '' ? patrolData.mc : '无对象' }}
                  </span>
                  <span v-else>
                    {{ patrolData.mc !== '' && patrolData.mc ? patrolData.mc : '无对象' }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
<!--        <div class="men-box">-->
<!--          <div class="men-title">巡查类别</div>-->
<!--          <div class="men-title flxend" style="color: gray">-->
<!--            <div v-if="patrolData !== null">{{ patrolData.s_type_mc !== '' ? patrolData.s_type_mc : '无对象' }}</div>-->
<!--          </div>-->
<!--        </div>-->
        <div class="men-box" v-show="zhuanname === ''">
          <div class="men-title">专项任务</div>
          <img src="../../../assets/images/icon-xc-add.png" alt="" class="imgs" @click="clickOverlay">
        </div>
        <div v-show="zhuanname!==''">
          <div class="men-box" @click="clickOverlay">
            <div class="list-box">
              <div class="dian">专项任务-</div>
              <div class="yhd">{{ zhuanname }}</div>
            </div>
          </div>
          <div class="men-box" @click="clickOverlay">
            <div class="list-box">
              <div class="dian">具体任务-</div>
              <div class="yhd">{{ juname }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="app-men-box">
        <div class="men-box" v-if="!Districts && !Streets && !communitys">
          <div class="men-title">参加人员</div>
          <img @click="personshow" src="../../../assets/images/icon-xc-add.png" alt="" class="imgs">
        </div>
        <div class="men-box" v-if="Districts" @click="personshow">
          <div class="list-box">
            <div class="dian">参加领导-</div>
            <div class="yhd">{{ Districts }}</div>
          </div>
        </div>
        <div class="men-box" v-if="Streets" @click="personshow">
          <div class="list-box">
            <div class="dian">街道部门-</div>
            <div class="yhd">{{ Streets }}</div>
          </div>
        </div>
        <div class="men-box" v-if="communitys" @click="personshow">
          <div class="list-box">
            <div class="dian">社区-</div>
            <div class="yhd">{{ communitys }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 专项任务弹框 -->
    <van-popup v-model="showrenwu" :close-on-click-overlay="false">
      <div class="contt1">
        <div class="tan_title">
          <div>专项任务</div>
          <img @click="showrenwu=false" src="../../../assets/images/false.png" />
        </div>
        <div class="main zxrw">
          <div v-for="(v,index) of specialList" class="zxrw_fj" :key="index">
            <div @click="xuanzhe($event)" class="tanlist">
              <div class="">{{v.name}}</div>
            </div>
            <div class="jtrw dply">
              <div
                class="tanlist tanchild"
                :class="{active:x.xuanz}"
                v-for="(x,item) of v.list" :key="item"
                @click="xuanzhe2(x,index,item)"
                :data-id="v.id" :id="x.id"
                :data-name="v.name"
                :name="x.name" >{{x.name}}</div>
            </div>
          </div>
        </div>
        <div class="tanyes" @click="queding">确定</div>
      </div>
    </van-popup>
    <!-- 参与人员弹框 -->
    <van-popup v-model="persontanbox" :close-on-click-overlay="false">
      <div class="contt1">
        <div class="tan_title">
          <div>参加人员</div>
          <img @click="personyes" src="../../../assets/images/false.png" />
        </div>
        <div class="main">
          <div class="personum">
            <div>人数</div>
            <input
              type="number"
              v-model="peopleNum"
              placeholder="请输入" />
          </div>
          <div class="boxg">
            <div class="personum" @click="btn($event)">
              <div>区级</div>
            </div>
            <div class="close_flex_next dply">
              <div
                class="cesjiedao"
                :class="personnel.indexOf(item.id) !== -1 ? 'active' : ''"
                v-for="(item, index) in personnelData.diStriCtLevel"
                :key="index"
                @click="clickDistrict(item)">{{ item.username }}</div>
              <div class="cesjiedao">
                <input @input="inputjy(1)" class="input" v-model="districtText" placeholder="请输入" />
              </div>
            </div>
          </div>
          <div class="boxg" v-show="lev === 1 || lev === 2">
            <div class="personum" @click="btn($event)">
              <div>街道/部门</div>
            </div>
            <div class="close_flex_next dply">
              <div
                class="cesjiedao"
                :class="personnel.indexOf(item.id) !== -1 ? 'active' : ''"
                v-for="(item, index) in personnelData.dePartMent"
                :key="index"
                @click="clickStreet(item)">{{ item.username }}</div>
              <div class="cesjiedao">
                <input @input="inputjy(2)" class="input" v-model="streetText" placeholder="请输入" />
              </div>
            </div>
          </div>
          <div class="boxg" v-show="lev === 2 || (lev === 2 && (personnelData.levs !== 1 && personnelData.levs !== 100))">
            <div @click="btn($event)" class="personum">
              <div>社区</div>
            </div>
            <div class="close_flex_next dply">
              <div
                class="cesjiedao"
                :class="personnel.indexOf(item.id) !== -1 ? 'active' : ''"
                v-for="(item, index) in personnelData.community"
                :key="index"
                @click="clickCommunity(item)">{{ item.username }}</div>
              <div class="cesjiedao">
                <input @input="inputjy(3)" class="input" v-model="communityText" placeholder="请输入" />
              </div>
            </div>
          </div>
        </div>
        <div class="tanyes" @click="personyes">确定</div>
      </div>
    </van-popup>
  </div>
</template>

<script>
  export default {
    name: "non_fixed_point",
    data () {
      return {
        showrenwu:false,  //  专项任务弹框
        persontanbox:false, // 参与人员弹框
        userId: 0,
        specialList: [],
        zhuanname:'', // 专项任务
        juname:'',  //  具体任务
        personnum:'', // 参与人数
        patrolData: {},
        personnelData: {
          dePartMent: []
        },
        peopleNum: null,
        district: [], //  选择的人员
        street: [], //  选择的人员
        community: [],  //  选择的人员
        // districts: '',
        // streets: '',
        communitys: '',  //  显示
        District: [], //  显示数组
        Street: [], //  显示数组
        Districts: '',  //  显示
        Streets: '',  //  显示
        personnel: [],  //  所有人员
        commonPersonnel: [],  //  传值
        commonPersonnelText:[],
        districtText: '',
        streetText: '',
        communityText: '',
        patrolTroubleshootId: 0,
        renwuchuan:'',//专项任务传值拼接
        lev:''
      };
    },
    watch: {
      commonPersonnel() {
        if (this.commonPersonnel.length > 0) {
          this.peopleNum = this.commonPersonnel.length + this.commonPersonnelText.length
        } else {
          this.peopleNum = null
        }
        console.log(this.peopleNum)
      }
    },
    mounted () {
      this.userId = Number(localStorage.getItem('userId'));
      let a = JSON.parse(localStorage.getItem('param_fgd'));
      if (a) {
        this.Districts = a.Districts;
        this.Streets = a.Streets;
        this.communitys = a.communitys;
        this.District = a.District;
        this.Street = a.Street;
        this.community = a.community;
        this.zhuanname = a.zhuanname;
        this.juname = a.juname;
        this.personnel = a.personnel;
        this.commonPersonnel = a.commonPersonnel;
        this.commonPersonnelText = a.commonPersonnelText;
      }
      this.patrolData = JSON.parse(localStorage.getItem('xcdx_map_xcdxObj'));
      if (this.patrolData !== null) {
        this.querySpecial();
      }
    },
    methods: {
      // 保存巡查对象
      // savePatrol () {
      //   var a
      //   switch (this.patrolData.b_type) {
      //     case 'jzw': a = 1;
      //       break;
      //     case 'jxmd': a = 2;
      //       break;
      //     case 'zgf': a = 3
      //       break;
      //     default: a = 4
      //   }
      //   let params = {
      //     userId: this.userId,
      //     type: a,
      //     id: Number(this.patrolData.id),
      //     xiaoType: Number(this.patrolData.s_type)
      //   };
      //   this.axios.get(`${this.$global_msg.Url.host}/partroInspection/noPointPatrolSave`,
      //     { params }).then(res => {
      //     console.log(res)
      //     this.patrolTroubleshootId = res.data.rows.patrolTroubleshootId;
      //     let a = JSON.parse(localStorage.getItem('param_fgd'));
      //     if (a === null) {
      //       this.jumpDetail();
      //     }
      //   });
      // },
      inputjy(x) { //添加人员时输入框
        if(x==1){
          if(this.districtText!==''){
            this.districtText = this.districtText.replace(/[,|、]/g, '，');
          }
        }else if(x==2){
          if(this.streetText!==''){
            this.streetText = this.streetText.replace(/[,|、]/g, '，');
          }
        }else {
          if (this.communityText !== '') {
            this.streetText = this.streetText.replace(/[,|、]/g, '，');
          }
        }
      },
      // 获取专项任务列表
      querySpecial () {
        let params = {
          userId: this.userId
        };
        this.axios.get(`${this.$global_msg.Url.host}/partroInspection/selectTask`,
          { params }).then(res => {
            if(res.data.code==200){
              this.specialList = res.data.rows.task;
            }else{
              this.$toast(res.data.msg);
            }
        }).catch(error => {
            this.$terminal._error(error)
          });
      },
      // 获取参与人员列表
      queryPersonnel () {
        try{
          plus.nativeUI.showWaiting("正在加载...");
        }catch(e){
          console.log(e.message);
        }
        this.patrolTroubleshootId = Number(localStorage.getItem('patrolTroubleshootId_FGD'))
        let params = {
          userId: this.userId,
          patrolTroubleshootId: this.patrolTroubleshootId
          // patrolTroubleshootId: 812
        };
        let api = 'partroInspection/deploymentChoosePeople';
        this.axios.get(`${this.$global_msg.Url.host}/${api}`,
          { params }).then(res => {
          if (res.data.code === 200) {
            this.personnelData = res.data.rows;
            this.personnelData.dePartMent = this.personnelData.dePartMent.concat(this.personnelData.street)
            this.lev=res.data.rows.lev
          } else {
            this.$toast(res.data.msg);
          }
          try{
            plus.nativeUI.closeWaiting();
          }catch(e){
            console.log(e.message);
          }
        }).catch(error => {
            this.$terminal._error(error)
          });
      },
      //  返回巡查列表
      jumpReturn () {
        this.$router.push({
          path: '/community_list'
        })
        localStorage.removeItem('xcdx_map_xcdxObj');
        localStorage.removeItem('param_fgd');
      },
      //  跳转巡查对象地图页
      jumpMap () {
        let xcdx_map_manager = {
          from: '/feiguding',
          init: true
        };
        localStorage.setItem("xcdx_map_manager", JSON.stringify(xcdx_map_manager));
        localStorage.removeItem('patrolTroubleshootId_FGD');
        this.$router.push("/xcdx_map");
      },
      //  点击区级人员
      clickDistrict (data) {
        let a = this.personnel;
        let b = `${data.dwid},,,${data.lev},,,${data.username},,,${data.teamUser},,,${data.id}`
        // let b = `${data.dwid},,,${data.lev},,,${data.username},,,${data.teamUser}`
        if (a.indexOf(data.id) === -1) {
          this.district.push(data.id);
          a.push(data.id);
          this.commonPersonnel.push(b);
          if (data.teamUser !== 0 || data.teamUser === null) {
            this.District.push(data.username);
          }
        } else {
          a.map((item, index) => {
            if (item === data.id) {
              a.splice(index, 1);
            }
          })
          if (data.teamUser !== 0 || data.teamUser === null) {
            this.District.map((item, index) => {
              if (item === data.username) {
                this.District.splice(index, 1);
              }
            })
          }
          this.district.map((item, index) => {
            if (item === data.username) {
              this.district.splice(index, 1)
            }
          })
          this.commonPersonnel.map((item, index) => {
            if (item === b) {
              this.commonPersonnel.splice(index, 1)
            }
          })
        }
      },
      //  点击街道人员
      clickStreet (data) {
        let a = this.personnel;
        let b = `${data.dwid},,,${data.lev},,,${data.username},,,${data.teamUser},,,${data.id}`
        // let b = `${data.dwid},,,${data.lev},,,${data.username},,,${data.teamUser}`
        if (a.indexOf(data.id) === -1) {
          this.street.push(data.username);
          a.push(data.id);
          this.commonPersonnel.push(b);
          if (data.teamUser !== 0 || data.teamUser === null) {
            this.Street.push(data.username);
          }
        } else {
          a.map((item, index) => {
            if (item === data.id) {
              a.splice(index, 1);
            }
          })
          if (data.teamUser !== 0 || data.teamUser === null) {
            this.Street.map((item, index) => {
              if (item === data.username) {
                this.Street.splice(index, 1);
              }
            })
          }
          this.street.map((item, index) => {
            if (item === data.username) {
              this.street.splice(index, 1)
            }
          })
          this.commonPersonnel.map((item, index) => {
            if (item === b) {
              this.commonPersonnel.splice(index, 1)
            }
          })
        }
      },
      //  点击社区人员
      clickCommunity (data) {
        let a = this.personnel;
        let b = `${data.dwid},,,${data.lev},,,${data.username},,,${data.teamUser},,,${data.id}`
        // let b = `${data.dwid},,,${data.lev},,,${data.username},,,${data.teamUser}`
        if (a.indexOf(data.id) === -1) {
          this.community.push(data.username);
          a.push(data.id);
          this.commonPersonnel.push(b);
        } else {
          a.map((item, index) => {
            if (item === data.id) {
              a.splice(index, 1);
            }
          })
          this.community.map((item, index) => {
            if (item === data.username) {
              this.community.splice(index, 1)
            }
          })
          this.commonPersonnel.map((item, index) => {
            if (item === b) {
              this.commonPersonnel.splice(index, 1)
            }
          })
        }
      },
      //  弹框关闭/确定
      personyes () {
        this.persontanbox = false;
        let qujiaddperson=[]
        var _this=this
        if (_this.districtText!== "") {
          _this.districtText.split('，').forEach((x)=>{
            let a = `null,,,0,,,${x},,,null,,,null`
            _this.commonPersonnelText.push(a)
            _this.District.push(x)
            qujiaddperson.push({addname:`0,,,${x}`})
          })
          _this.districtText=""
        }
        if (_this.streetText!== "") {
          _this.streetText.split('，').forEach((x)=>{
            let a = `null,,,1,,,${x},,,null,,,null`
            _this.commonPersonnelText.push(a)
            _this.Street.push(x)
            qujiaddperson.push({addname:`1,,,${x}`})
          })
          _this.streetText=""
        }
        if (_this.communityText!== "") {
          _this.communityText.split('，').forEach((x)=>{
            let a = `null,,,2,,,${x},,,null,,,null`
            _this.commonPersonnelText.push(a)
            _this.community.push(x)
            qujiaddperson.push({addname:`2,,,${x}`})
          })
          _this.communityText=""
        }
        var addpersonchuan=''
        qujiaddperson.forEach((v,index)=>{
          addpersonchuan+=':'+ v.addname
        })
        addpersonchuan = addpersonchuan.substring(1)
        let type;
        if (this.patrolData.id !== '' && this.patrolData.id !== null) {
          type = 0;
        } else {
          type = 1;
        }
        this.axios.get(this.$global_msg.Url.host + "/Xx/insertPersonnelLevel?patrolTroubleshootId="
          + this.patrolTroubleshootId+'&newUserInfoVos='+addpersonchuan+'&userId='+this.userId+'&type=' + type)
          .then(res => {
            if(res.data.code==0){
              this.personnel = this.personnel.concat(res.data.rows);
              _this.queryPersonnel()
            }else{
              this.$toast(res.data.msg);
            }
          }).catch(error => {
            this.$terminal._error(error)
          });
        _this.Districts = this.District.toString();
        _this.Streets = this.Street.toString();
        _this.communitys = this.community.toString();
        this.jumpDetail();
      },
      //  跳转是否页面
      jumpDetail () {
        if (this.patrolData !== null) {
          let param_fgd = {
            patrolTroubleshootId: this.patrolTroubleshootId,  //  生成的巡查清单的id
            patrolData_dx: this.patrolData.dwMc,
            patrolData_lb: this.patrolData.s_type_mc,
            zhuanname: this.zhuanname,  //  显示的专项任务
            juname: this.juname,  //  显示的具体任务
            Districts: this.Districts,  //  显示的参加领导人
            Streets: this.Streets,  //  显示的街道部门人
            communitys: this.communitys,  //  显示的社区人
            District: this.District,
            Street: this.Street,
            community: this.community,
            personnel: this.personnel,
            commonPersonnel: this.commonPersonnel,
            commonPersonnelText: this.commonPersonnelText,
            renwuchuan: this.renwuchuan,
            personnum: this.peopleNum,
            router: '/community_list'
          }
          // if (this.commonPersonnel.length <= 0 && this.commonPersonnelText.length <= 0) {
          //   param_fgd.personnum = this.peopleNum + 1
          // } else {
          //   param_fgd.personnum = this.commonPersonnel.length + this.commonPersonnelText.length + 1
          // }
          localStorage.removeItem('busheji_list');
          localStorage.setItem('param_fgd', JSON.stringify(param_fgd));
          // this.$emit('jumpDetail', param_fgd);
          // setTimeout( _ => {
          //   this.$router.push({
          //     path: '/feiguding'
          //   })
          // }, 600)
        } else {
          this.$toast('请选择巡查对象')
        }
      },
      //  专项任务弹框
      clickOverlay () {
        if (this.patrolData !== null) {
          this.showrenwu = true
        } else {
          this.$toast('请先选择巡查对象!')
        }
      },
      xuanzhe(e){//专项任务，下拉
        $(e.currentTarget).parents(".zxrw_fj").find(".jtrw").toggleClass("dply")
        $(e.currentTarget).parents(".zxrw_fj").siblings().find(".jtrw").addClass("dply")
      },
      queding(){//专项任务弹框确定按钮
        this.showrenwu=false
        let fid = []
        let did = []
        let fidname = []
        let didname = []
        let html=""
        let str=""
        $(".zxrw .active").each(function(i, item) {
          fidname.push($(item).attr("data-name"))
          didname.push($(item).attr("name"))
          fid.push($(item).attr("data-id"))
          did.push({
            dataid: $(item).attr("data-id"),
            id: $(item).attr("id")
          })
        })
        fidname = [...new Set(fidname)]
        fid = [...new Set(fid)]
        for (let i of fid) {
          html += "|"
          for (let ii of did) {
            if (i == ii.dataid) {
              html += "," + ii.id
            }
          }
        }
        html = html.substring(1).split("|")
        for (let i = 0; i < fid.length; i++) {
          for (let ii = 0; ii < html.length; ii++) {
            if (i == ii) {
              str += "a" + fid[i] + "," + html[i]
            }
          }
        }
        str = str.substring(1)
        console.log(str)
        this.renwuchuan=str
        this.zhuanname = fidname.join()
        this.juname = didname.join()
        this.jumpDetail();
      },
      xuanzhe2 (x, index, item) {//专项任务选择
        var _this = this;
        var xuanz = x.xuanz ? false : true;
        _this.specialList[index].list[item].xuanz = xuanz;
        _this.$forceUpdate();
      },
      personshow () {
        if (this.patrolData !== null) {
          this.queryPersonnel();
          this.persontanbox = true;
        } else {
          this.$toast('请先选择巡查对象!')
        }
      },
      btn (e) {
        $(e.currentTarget).parents(".boxg").find(".close_flex_next").toggleClass("dply")
        $(e.currentTarget).parents(".boxg").siblings().find(".close_flex_next").addClass("dply")
      }
    }
  }
</script>

<style scoped>
  .men-boxs {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .list-box {
    display: flex;
    align-items: center;
    white-space: normal;
  }
  .dian {
    word-break: keep-all;
  }
  .men-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px 40px;
    border-bottom: 1Px solid #f2f2f2;
  }
  .close_flex_next {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  /* 弹框start */
  .cesjiedao {
    width: 25%;
    border-bottom: 1px solid #f2f2f2;
    height: 1.388888rem;
    display: inline-block;
    line-height: 1.388888rem;
    text-align: center;
    overflow: hidden;
  }
  .personum {
    display: flex;
    justify-content: space-between;
    height: 1.388888rem;
    align-items: center;
    border-bottom: 1px solid #f2f2f2;
  }
  .input {
    width: 100%;
    text-align: center;
  }
  .personum input {
    width: 50%;
  }
  .tan_title{
    height: 1.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f2f2f2;
  }
  .tan_title img{
    width: 0.4rem;
  }
  .active{
    color:#2b6cfe;
  }
  .van-popup {
    width: 80%;
    border-radius: 0.18rem;
    padding: 0 0.2rem;
  }
  .contt1 {
    width: 100%;
  }
  .main {
    max-height: 6.944444rem;
    overflow-y: scroll;
  }
  .tanlist {
    display: flex;
    align-items: center;
    padding: 0.3rem;
    border-bottom: 1px solid #ddd;
  }
  .jtrw > div {
    padding: 0.3rem 1rem;
  }
  .tanchild {
    padding: 0 1rem;
  }
  .tanyes {
    color: white;
    background-color: #2b6cfe;
    width: 2.5rem;
    height: 0.8rem;
    text-align: center;
    line-height: 0.8rem;
    margin: 0.3rem auto;
    border-radius: 0.1rem;
  }
  .dply {
    display: none;
  }
  /* 弹框end */
  .overlay {
    z-index: 1111;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .7);
  }
  .overlay-main {
    z-index: 1112;
    position: fixed;
    max-height: 100%;
    top: 50%;
    left: 50%;
    padding: 0 50px;
    background-color: #fff;
    transform: translate3d(-50%, -50%, 0);
    transition: transform 0.3s;
    width: 70%;
  }
  .overlay-box {
    max-height: 710px;
    overflow: hidden;
    overflow-y: auto;
  }
  .overlay-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 0;
    border-bottom: 1PX solid #f2f2f2;
  }
  .overlay-span {
    margin-left: 80px;
  }
  .overlay-btn {
    padding: 30px 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .btn {
    background-color: #007aff;
    color: #fff;
    padding: 15px 100px;
    border-radius: 15px;
  }
  .app-men {
    background-color: #f2f2f2
  }
  .app-men-box {
    background-color: #ffffff;
  }
  .men-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px 40px;
    border-bottom: 1Px solid #f2f2f2;
  }
  .men-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 50%;
  }
  .flxend {
    justify-content: flex-end
  }
  .imgs {
    width: 50px;
    height: 50px;
  }
  /* 头部 */
  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 20;
    font-size: 0.388888rem;
  }
  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
  }
  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }
  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }
  .button-box {
    position: fixed;
    bottom: 40px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .button {
    width: 80%;
    height: 100%;
    color: white;
    text-align: center;
    padding: 20px 0;
    background-color: #2b6cfe;
  }

</style>
